<template>
	<div>
		<div ref="echarts" class="echarts"></div>
	</div>
</template>

<script>
  import * as echarts from 'echarts';
  import sxjson from './shanxi.json'
  import {areaName} from './area.js'
  import axios from 'axios'
	export default {
		data:()=>{
			return {
        myCharts:'',
        nameMap:'',
        // list:[
        //   {name:'太原市',value:3,user_count:1,company_count:2},
        //   {name:'临汾市',value:3,user_count:1,company_count:2},
        //   {name:'吕梁市',value:3,user_count:1,company_count:2},
        //   {name:'大同市',value:3,user_count:1,company_count:2},
        //   {name:'忻州市',value:3,user_count:1,company_count:2},
        //   {name:'晋中市',value:3,user_count:1,company_count:2},
        //   {name:'晋城市',value:3,user_count:1,company_count:2},
        //   {name:'朔州市',value:3,user_count:1,company_count:2},
        //   {name:'运城市',value:3,user_count:1,company_count:2},
        //   {name:'长治市',value:3,user_count:1,company_count:2},
        //   {name:'阳泉市',value:3,user_count:1,company_count:2}
        // ]
			}
		},
		props:{
			colors:{
        type:Array,
        default: ()=>{
          return ['#909EFD','#F5DA6D','#FF9E9E','#BFEB81','#6DE6DF']
        }
			},
			list:{
        type:Array
      }
		},
		mounted() {
      this.nameMap = areaName['山西省']
      this.init();
		},
		methods:{
			init() {
        this.myCharts = echarts.init(this.$refs['echarts'])
        this.setOption();
				window.addEventListener('resize',()=>{
					this.myCharts.resize() 
        })
        // this.myCharts.on('click',(param)=>{
        //   let name = param.data.name
        //   this.nameMap = areaName[name]
        //   this.myCharts.clear();
        //   this.list = [
        //     {name:'娄烦县',value:2,user_count:1,company_count:1},
        //     {name:'尖草坪区',value:3,user_count:1,company_count:2},
        //     {name:'阳曲县',value:3,user_count:1,company_count:2},
        //     {name:'杏花岭区',value:3,user_count:1,company_count:2},
        //     {name:'迎泽区',value:3,user_count:1,company_count:2},
        //     {name:'小店区',value:3,user_count:1,company_count:2},
        //     {name:'晋源区',value:3,user_count:1,company_count:2},
        //     {name:'清徐县',value:3,user_count:1,company_count:2},
        //     {name:'万柏林区',value:3,user_count:1,company_count:2},
        //     {name:'古交市',value:3,user_count:1,company_count:2}
        //   ]
        //   let taiyuan = require('./taiyuan.json')
        //   this.init(taiyuan)
        // })
			},
			setOption(){
        //第一步：在echarts中注册要展示的地图
        echarts.registerMap('shanxi', sxjson);
        let ecopt = {
          tooltip: {
            trigger: 'item',
            formatter:function(params){
              return `${params.name}<br/>用户数：${params.data.value}<br/>应聘者：${params.data.user_count}<br/>招聘者：${params.data.company_count}`
            }
          },
          backgroundColor: '#fff',
          series:[
            {
              type:'map',
              mapType:'shanxi',
              zoom: 1.3,
              itemStyle: {
                areaColor:'#8ACAFF',
                borderColor:'#E2EDFF',
                borderWidth:1,
                shadowColor: '#E2EDFF',
                shadowBlur: 4
              }, 
              label: {
                show:true,
                fontSize: 12,
                color: '#444444',
                lineHeight:16,
                formatter: function (params) {
                  return params.name+"\n"+ params.value;
                },
              },
              emphasis:{
                label:{
                  show:true,
                  color: '#fff',
                },
                itemStyle:{
                  areaColor:'#FFB95E'
                }
              },
              data:this.list,
              nameMap: this.nameMap
            }
          ]
        }
        this.myCharts.setOption(ecopt);
			}
		},
		watch:{
			list:{
				deep:true,
				handler(){
					this.$nextTick(() => {
						this.setOption()
						this.myCharts.resize()
					})
				}
			}
		}
	}
</script>

<style  scoped="scoped" lang="scss">
	.echarts{
    width: 100%;
    height: 440px;
	}
</style>
